<template>
  <div class="role-list">
    <!-- 面包屑 -->
    <el-row>
      <my-breadcrumb level1="权限管理" level2="角色列表"></my-breadcrumb>
    </el-row>
    <!-- 按钮 -->
    <el-row>
      <el-col :span="8">
        <el-button>添加用户</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="" width="60" type="expand">
          <template slot-scope="scope">
            <span v-if="scope.row.children.length === 0">未添加权限</span>
            <el-row
              v-for="(level1, index1) in scope.row.children"
              :key="'level1-' + index1"
            >
              <el-col :span="4"
                ><el-tag
                  closable
                  @close="handleTagClose(scope.row, level1.id)"
                  >{{ level1.authName }}</el-tag
                >
                <i class="el-icon-arrow-right"></i>
              </el-col>
              <el-col :span="20">
                <el-row
                  v-for="(level2, index2) in level1.children"
                  :key="'level2-' + index2"
                >
                  <el-col :span="4"
                    ><el-tag
                      @close="handleTagClose(scope.row, level2.id)"
                      type="success"
                      closable
                      >{{ level2.authName }}</el-tag
                    >
                    <i class="el-icon-arrow-right"></i>
                  </el-col>
                  <el-col :span="20">
                    <el-tag
                      type="warning"
                      closable
                      @close="handleTagClose(scope.row, level3.id)"
                      v-for="(level3, index3) in level2.children"
                      :key="'level3-' + index3"
                      >{{ level3.authName }}</el-tag
                    >
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#" width="60"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="160">
        </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述" width="200">
        </el-table-column>
        <el-table-column prop="id" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-tooltip effect="dark" content="编辑" placement="top">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  plain
                  size="mini"
                  @click="handleEditRole(scope.row)"
                  :disabled="scope.row.username === 'admin'"
                ></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="删除" placement="top">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  plain
                  size="mini"
                  @click="handleDeleteRole(scope.row)"
                  :disabled="scope.row.username === 'admin'"
                ></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="分配" placement="top">
                <el-button
                  type="success"
                  icon="el-icon-check"
                  circle
                  plain
                  size="mini"
                  @click="handleRightsRole(scope.row)"
                ></el-button>
              </el-tooltip>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 分配角色权限 -->
    <role-edit
      :dialogVisibleRightsRoleEdit="dialogVisibleRightsRoleEdit"
      :roleInfo="currRoleInfo"
      @editRightsRoleClosed="dialogVisibleRightsRoleEdit = false"
      @editRightsRoleSuccess="getRoleListData"
    ></role-edit>
  </div>
</template>

<script>
import MyBreadcrumb from '@/components/MyBreadcrumb'
import RoleEdit from './components/RoleEdit'

export default {
  components: {
    MyBreadcrumb,
    RoleEdit,
  },
  data() {
    return {
      tableData: [],
      dialogVisibleRightsRoleEdit: false,
      currRoleInfo: {},
    }
  },
  created() {
    this.getRoleListData()
  },
  computed: {},
  methods: {
    async getRoleListData() {
      const {
        data: { data, meta },
      } = await this.$http.get('/roles')

      // console.log(data)
      if (meta.status === 200) {
        this.tableData = data
      } else {
        this.$message.warning(meta.msg)
      }
    },
    // 标签-取消权限
    async handleTagClose(roleInfo, rightId) {
      // 请求路径：roles/:roleId/rights/:rightId

      const {
        data: { data, meta },
      } = await this.$http.delete(`/roles/${roleInfo.id}/rights/${rightId}`)

      console.log(data)

      if (meta.status === 200) {
        // 更新当前角色权限
        roleInfo.children = data
        this.$message.success(meta.msg)
      } else {
        this.$message.warning(meta.msg)
      }
    },

    handleRightsRole(roleInfo) {
      this.dialogVisibleRightsRoleEdit = true
      this.currRoleInfo = roleInfo
    },
  },
}
</script>

<style lang="less" scoped>
.role-list {
  & > .el-row {
    padding: 5px 0;
  }
  .el-tag {
    margin: 5px;
  }
}
</style>
